<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>右键菜单</title>
    <link rel="stylesheet" href="./rightMenu.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <style>
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            overflow: hidden;
            font-family: 微软雅黑
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>任意位置右键查看效果</h3>
        <p>1.初始化</p>
        <p>2.配置参数(参数：1.右键响应的区域，2.右键出现的listName,3.每一个右键Item响应的事件)</p>
        <p>3.右键的icon使用的是fontawesome中的图标</p>
    </div>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="./rightMenu.js"></script>
    <script>
        $(document).ready(function () {
            RMenu.init({
                id: 'test',
                el: '.box',
                items: {
                    "edit": { name: "编辑", icon: 'edit' },
                    "del": { name: "删除", icon: 'trash-o' },
                    "add": {
                        name: "添加", icon: 'plus', items: {
                            "new-text": { name: "添加文件", icon: 'file-text' },
                            "new-zip": { name: "添加ZIP", icon: 'file-zip-o' }
                        }
                    },
                    "refresh": { name: "刷新", icon: 'refresh' },
                    "test": { name: "测试" },
                    "down": { name: "下载按钮", icon: 'cloud-download' },
                    "new": {
                        name: "新建", icon: 'file', items: {
                            "new-text": { name: "新建文件", icon: 'file-text' },
                            "new-zip": { name: "新建ZIP", icon: 'file-zip-o' }
                        }
                    }
                },
                callback: function (res) {
                    console.log(res)
                    if (res.data == 'edit') {
                        console.log('点击了edit');
                    } else if (res.data == 'del') {
                        console.log('点击了del');
                    } else if (res.data == 'add') {
                        console.log('点击了add');
                    } else if (res.data == 'refresh') {
                        window.location.reload();
                    } else if (res.data == 'down') {
                        console.log('点击了download');
                    }
                }
            })
        });
    </script>
</body>

</html>